<template>
  <div class="goods-container">
    <!-- 左侧 -->
    <div class="goods-left">
      <van-sidebar v-model="active" class="sidebar">
        <van-sidebar-item
          v-for="(item, index) in goodsdata"
          :key="index"
          :title="item.name"
          @click="onChange"
        />
      </van-sidebar>
    </div>
    <!-- 右侧 -->
    <div class="goods-right" id="right">
      <div class="section-wrap">
        <div
          v-for="(item, index) in goodsdata"
          :key="item.name"
          class="section"
          :id="'g' + index"
        >
          <h3 class="fltitle">{{ item.name }}</h3>
          <div
            v-for="fooditem in item.foods"
            :key="fooditem.id"
            class="goods-conts"
          >
            <img :src="fooditem.imgUrl" @click="jumpgoodsabout(fooditem)" />
            <div class="goods-Desc df fdc jcsb">
              <h4 class="h4" @click="jumpgoodsabout(fooditem)">
                {{ fooditem.name }}
              </h4>
              <div class="fooditem-sellCount df">
                <p class="fooditem-p">月售{{ fooditem.sellCount }}</p>
                <p>好评度{{ fooditem.rating }}%</p>
              </div>
              <div class="stepper df jcsb">
                <p class="fooditem-price">￥{{ fooditem.price }}</p>
                <!-- 步进器 -->
                <p>
                  <van-stepper v-model="fooditem.count" theme="round" min="0" />
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import BetterScroll from "better-scroll";
import { mapActions, mapState, mapGetters } from "vuex";

@Component({
  computed: {
    ...mapState(["goodsdata"]),
    ...mapGetters(["selectedData"]),
  },

  methods: {
    ...mapActions(["get_goods_data", "get_shop_car", "get_shop_car2"]),
  },
})
export default class Goods extends Vue {
  get_goods_data: any;
  get_shop_car: any;
  get_shop_car2: any;
  active: number = 0;
  scolldom: any;
  scolldom2: any;
  selectedData: any;
  loading: boolean = false;

  //切换侧边导航 触发 滚动到指定元素
  onChange(index: number) {
    //滚动到指定元素 scrollToElement(参数1：class或id或dom,时长：ms)
    this.scolldom.scrollToElement("#g" + index, 1000);

    //如果左侧正在执行切换菜单 loading为true
    this.loading = true;
    this.scolldom.on("scrollEnd", () => {
      this.loading = false;
    });
  }

  jumpgoodsabout(item: any) {
    this.$router.push({
      path: "/good/about",
      query: {
        id: <any>item,
      },
    });
  }
  created() {
    this.get_goods_data();

    this.$nextTick(() => {//初始配置better-scroll
    this.scolldom = new BetterScroll("#right", {
      scrollY: true,
      click: true,
      probeType: 3,
    });

    const left = new BetterScroll(".goods-left", {
      scrollY: true,
      click: true,
      // probeType: 3,
    });

    // 获取盒子高度，存在一个数组里面
    setTimeout(() => {
      const heightDom = [...document.querySelectorAll(".section")];
      const heightList = heightDom.map((item: any) => {
        return item.clientHeight;
      });
      // 调用scroll方法监听滚动高度
      this.scolldom.on("scroll", (position: any) => {
        if (this.loading) return;
        let y = Math.abs(position.y);
        heightList.reduce((total, cur, index) => {
          if (y > total && y < total + cur) {
            this.active = index;
          }
          return total + cur;
        }, 0);
      });

      //监听滚动停止 把loading还原为false
      this.scolldom.on("scrollEnd", () => {
        this.loading = false;
      });
    }, 100);});

    
  }
}
</script>

<style lang="scss" scoped>
.goods-container {
  display: flex;
  width: 100vw;
  height: 100%;
  .goods-left {
    background-color: #f7f8fa;
    height: 100%;

    overflow-y: auto;
  }
  .goods-right {
    flex: 1;
    font-size: 16px;
    box-sizing: border-box;
    overflow-y: auto;
    img {
      margin-right: 10px;
      border-radius: 5px;
    }
    .goods-conts {
      display: flex;
      padding: 15px 0;
      background-color: #fff;
      img {
        width: 100px;
        height: 100px;
      }
      .goods-Desc {
        width: 100%;

        flex: 1;

        .h4 {
          margin: 2px 0 0 0;
        }
      }
    }
  }
  .fltitle {
    padding: 8px 0;
    background-color: #f4f4f4;
  }
}
.van-sidebar-item--select::before {
  background-color: #ffd103;
}
.van-sidebar {
  width: 83px;
  text-align: center;
}
.van-sidebar-item {
  font-size: 14px;
}
.fooditem-price {
  font-size: 22px;
  color: #f00;
  font-weight: bold;
}
::v-deep.van-stepper {
  padding-right: 12px;
}
.fooditem-p {
  margin-right: 18px;
}
.fooditem-sellCount {
  color: #999999;
  font-size: 14px;
}
.section:last-child {
  padding-bottom: 70px !important;
}
::-webkit-scrollbar {
  display: none;
}
.goods-Desc{
  padding: 0 10px;
}
</style>